import React, { Component } from 'react'
import { Layout, Card, Divider, Table, Row, Col } from 'antd';

// import PicturesWall from './PicturesWall';
import UpdatePasswordForm from './UpdatePasswordForm';

export class Me extends Component {
  render() {
    const user = this.props.user.toJS()
    user.key = user.id
    return (
      <Layout>
        <Card>
          <Divider orientation="left">基本信息</Divider>
          <Row>
            <Col span="12" offset="6">
              <Table
                dataSource={[user]} 
                columns={columns} 
                pagination={false}
                // style={{
                //   maxWidth: '600px',
                //   margin: 'auto'
                // }} 
              />
            </Col>
          </Row>
          <Divider orientation="left">密码修改</Divider>
          <Row>
            <Col span="12" offset="6">
              <UpdatePasswordForm />
            </Col>
          </Row>
          {/* <Divider orientation="left">人脸修改</Divider>
          <Row>
            <Col span="12" offset="6">
              <PicturesWall />
            </Col>
          </Row> */}
        </Card>
      </Layout>
    )
  }
}

const columns = [{
  title: '用户编号',
  dataIndex: 'key',
  key: 'key',
}, {
  title: '用户姓名',
  dataIndex: 'name',
  key: 'name',
}];

export default Me
